<template>
  <!-- 内容主体区域 -->
  <div class="content">
    <!-- 左侧榜单区域 -->
    <div class="left-side">
      <div class="tab">
        <div
            class="tab-item"
            :class="{ active: activeTab === 'channelvip' }"
            @mouseenter="setTab('channelvip')"
        >频道金榜</div>
        <div
            class="tab-item"
            :class="{ active: activeTab === 'newbie' }"
            @mouseenter="setTab('newbie')"
        >新手金榜</div>
      </div>

      <ul class="rank-list">
        <li
            v-for="(item, index) in rankData[activeTab]"
            :key="index"
            class="rank-item"
        >
          <span class="rank-tag">{{ item.id}}</span>
          <div class="rank-title" >
            {{ item.title }}
          </div>
          <span class="author">{{ item.author }}</span>
        </li>
      </ul>

<!--      <div class="rank-footer">-->
<!--        <div class="rank-label">-->
<!--          {{ footerLabel[activeTab] }}-->
<!--        </div>-->
<!--      </div>-->
    </div>

    <!-- 中间内容区域 -->
    <div class="middle-side">
      <div class="banner">
        <img src="@/assets/img/banner.png" alt="banner">
      </div>
      <!--        展示图片以及小说名-->
      <div class="imageList">
        <div class="story" v-for="(yq, index) in yqList" :key="index">
          <div class="storyInfo">
            <img :src="require('@/assets/img/'+yq.storyimg)"  alt="小说图片"></img>
          </div>
          <div @click="goDetail(yq)" class="storyName">《{{yq.name}}》</div>
        </div>
      </div>

      <div class="notice">
        <h3 class="notice-title">最新公告</h3>
        <ul class="notice-list">
          <li class="notice-item">霸王票抽奖和儿童站征文已开启，点击查收端午赠礼！</li>
          <li class="notice-item">五一快乐亿点点！动态装扮+超多好礼兑不停~ [04-29]</li>
          <li class="notice-item">小书喵五周年庆典有奖征集进行中，点击参与五一活动！</li>
        </ul>
      </div>
    </div>

    <!-- 右侧推荐区域 -->
    <div class="right-side">
      <div class="recommend-box">
        <h3 class="recommend-title">vip强力推荐</h3>
        <ul class="recommend-list">
          <li
              v-for="(item, index) in recommendList"
              :key="index"
              class="recommend-item"
          >
            <div class="recommend-text" >
              {{ item.title }}
            </div>
            <span class="recommend-author">{{ item.author }}</span>
          </li>
          <div class="report-item">
            <img src="@/assets/img/jb.png">
            <span class="report-word">电话：110</span>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";  // 合并导入语句
import { router } from "@/router/router.ts";
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import {require} from "@/utils/getFileUrl"

//创建钩子获取数据
let yqList = ref()

//获取数据的页面
onMounted(()=> {
  request.get("/getBl")
      .then(response => {
        yqList.value = response.data
      })
      .catch(error => {
        ElMessage.error(error)
      })
})

//使用小说对象作为参数并打开新窗口跳转详情页（导航栏上只显示小说id和名字）
function goDetail(story) {
  window.open(router.resolve({path: '/details',query:{"story":JSON.stringify(story)}}).href)
}


// 标签切换相关
const activeTab = ref('vip');
function setTab(tab: string) {
  activeTab.value = tab;
}

// 底部标签文本
const footerLabel = {
  vip: 'vip文月销量排行榜',
  completed: '完结文30日销量排行榜',
  thousand: '千字文月销量排行榜'
};

// 排行榜数据（带唯一ID）
const rankData = {
  channelvip: [
    { id: 1, title: "和心机坏女人分手后", author: "" },
    { id: 2, title: "今日离港", author: "" },
    { id: 3, title: "越界", author: "" },
    { id: 4, title: "年代文恶毒女配是我老", author: "" },
    { id: 5, title: "意外标记前任她冰山女", author: "" },
    { id: 6, title: "小书呆标记前任小糖后", author: "" },
    { id: 7, title: "醉吻前任亲姐后", author: "" },
    { id: 8, title: "为人师表，但沦落合欢", author: "" },
    { id: 9, title: "错误标记", author: "" },
    { id: 10, title: "和豪门大小姐分手后", author: "" }
  ],
  newbie: [ // 百合频道 - 新手金榜（对应第二张截图“新手金榜”）
    { id: 1, title: "年代文恶毒女配是我老", author: "" },
    { id: 2, title: "电竞大神重回新手村", author: "" },
    { id: 3, title: "母神慈悲[无限]", author: "" },
    { id: 4, title: "病美人师尊的千层套路", author: "" },
    { id: 5, title: "老许，你要娘子不要", author: "" },
    { id: 6, title: "被退婚后和奶系美O闪", author: "" },
    { id: 7, title: "沉没黎明", author: "" },
    { id: 8, title: "病美育辅的炮灰菱妻", author: "" },
    { id: 9, title: "医生主角对我很双标", author: "" },
    { id: 10, title: "老婆大我三千岁", author: "" }
  ]
};

// 右侧推荐列表数据（带唯一ID）
const recommendList = [
  { id: 21, title: "我真没想把黑莲", author: "鸽子不会咕" },
  { id: 22, title: "种田建房隔壁寡妇幼", author: "以笑和" },
  { id: 23, title: "废物A被水影善后扶", author: "时微雨" },
  { id: 24, title: "猫猫师姐身陷修罗", author: "云深见鹿" },
  { id: 25, title: "假死后，冰山前 小气象来喽", author: "" },
  { id: 26, title: "造了阴湿病娇的", author: "季秋二十三" },
  { id: 27, title: "退婚后养的崽崽黑化了", author: "海醉" },
  { id: 28, title: "与检察官小姐协议结", author: "纪柏铭" },
  { id: 29, title: "和前妻重生回热恋前", author: "病秧人" },
  { id: 30, title: "黑红作精让冷颜影后怀", author: "春溟" },
  { id: 31, title: "逆风向阳[真的要卿吗]", author: "" },
  { id: 32, title: "穿为公主渣妻 芝兰怎么不", author: "" }
];


// 登录相关函数
function handleLogin() {
  console.log('触发登录操作');
}

// 注册相关函数
function handleRegister() {
  console.log('触发注册操作');
}

// 找回账号函数
function handleFindAccount() {
  console.log('触发找回账号操作');
}

// 找回密码函数
function handleFindPassword() {
  console.log('触发找回密码操作');
}

// 导航函数
function navigateTo(path: string) {
  console.log('导航到路径：', path);
}
function goTonovelList() {
  router.push({path: '/novelList'})
}
</script>

<style scoped>
@import '@/assets/css/yq.css';
</style>